<template>
  <view>
    <uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0" :safe-area="false">
      <!-- 外层盒子 -->
      <view class="container">
        <!-- 关闭按钮 -->
        <view class="close-box" @click="close">
          <uni-icons type="closeempty" size="20"></uni-icons>
        </view>
        <!-- 标题 -->
        <view class="title-box">请选择地址</view>
        <!-- 选中的省市区 -->
        <view class="address-box">
          <block v-for="(itm,idx) in 3" :key="idx">
            <view v-if="idx <= currentIndex" class="address-item" @click="selectAreaClick(idx)">
              <view v-if="!getName(idx)" class="choose">请选择</view>
              <view v-else class="name">
                {{ getName(idx) }}
              </view>
            </view>
          </block>
        </view>
        <!-- 展示的省市区列表 -->
        <view class="address-list-box">
          <!-- 预设的城市列表 -->
          <view v-if="currentIndex == 0">
            <view class="hot-city-title">热门城市</view>
            <view class="hot-city-list">
              <view class="hot-city-list-item" v-for="(m,i) in hotCityList" :key="i" @click="hotCityClick(m)">
                {{ m.name.slice(0, 2) }}
              </view>
            </view>
          </view>
          
          <!-- 城市列表 -->
          <view>
            <view class="address-list-title">{{ tipStr }}</view>
            <block v-for="(list,index) in getList()" :key="index">
              <view class="address-list-item" v-for="(m,i) in list" :key="m._id" @click="selectClick(m,i)">
                <!-- 首字母标签，只有第一个显示 -->
                <view class="letter-label"> {{ i ? '' : m.first_letter }}</view>
                <!-- 省市区名称 -->
                <view class="name-box">{{ m.name }}</view>
              </view>
            </block>
          </view>
        </view>

        <view style="height: 34px;"></view>
      </view>

    </uni-popup>
  </view>
</template>

<script>
import provinceData from './city.js';
import { formateCityData,getHotList } from './helper.js';
export default {
  data() {
    return {
      // 热门城市列表
      hotCityList: [],
      // 省级列表
      proviceList: [],
      // 市级列表
      cityList: [],
      // 区/县级列表
      areaList: [],
      // 当前选中的省市区类型 0省 1市 2区/县
      currentIndex: 0,
      // 选中的省的名称
      provinceName: '',
      // 选中的市的名称
      cityName: '',
      // 选中的区/县的名称
      areaName: '',
    };
  },
  mounted() {
    this.processData()
    console.log('hot-list',this.hotCityList);
  },
  computed: {
    tipStr() {
      return this.currentIndex == 0 ? '上滑选择省市区/县' : this.currentIndex == 1 ? '选择城市' : '选择区/县'
    }
  },
  methods: {
    open() {
      this.reset()
      this.$refs.popup.open()
    },
    close() {
      this.$refs.popup.close()
    },
    reset() {
      this.currentIndex = 0
      this.provinceName = ''
      this.cityName = ''
      this.areaName = ''
    },
    // 处理数据
    processData() {
      this.hotCityList = getHotList()
      this.proviceList = formateCityData(provinceData.filter(m => m.type == 0)).cityList
    },
    // 处理要展示的省市区名称
    getName(i) {
      return i == 0 ? this.provinceName : i == 1 ? this.cityName : this.areaName
    },
    // 获取展示数据用的list
    getList() {
      return this.currentIndex == 0 ? this.proviceList : this.currentIndex == 1 ? this.cityList : this.areaList
    },
    // 热门城市点击事件
    hotCityClick(m) {
      if (m.type == 0) {
        this.provinceName = m.name
        this.currentIndex = 1   
        this.cityList = formateCityData(provinceData.filter(obj => obj.parent_code == m.code)).cityList     
      } else if (m.type == 1) {
        this.currentIndex = 2
        this.provinceName = m.parent_name
        this.cityName = m.name
        this.cityList = formateCityData(provinceData.filter(obj => obj.parent_code == m.parent_code)).cityList  
        this.areaList = formateCityData(provinceData.filter(obj => obj.parent_code == m.code)).cityList
      }
    },
    // 列表中的省市区名称点击事件
    selectClick(m) {
      if (this.currentIndex < 3) {
        if (m.type == 0) {
          this.provinceName = m.name
          this.cityList = formateCityData(provinceData.filter(obj => obj.parent_code == m.code)).cityList
        }else if (m.type == 1) {
          this.cityName = m.name
          this.areaList = formateCityData(provinceData.filter(obj => obj.parent_code == m.code)).cityList
        }else {
          this.areaName = m.name
        }
        this.currentIndex++
        if (this.currentIndex == 3) {
          this.close()
          this.$emit('select-area',{
          province: this.provinceName,
          city: this.cityName == '直辖县' || this.provinceName + '市' == this.cityName ? '' : this.cityName,
          area: this.areaName,
        })
        }
      }
    },
    // 展示选中的省市区名点击事件
    selectAreaClick(idx,m) {
      this.currentIndex = idx
      switch (this.currentIndex) {
        case 0:
        this.provinceName = ''
        this.cityName = ''
        this.areaName = ''
          break;
        case 1:
        this.cityName = ''
        this.areaName = ''
          break;
        case 2:
          break;
        default:
          break;
      }
    },
  },
  
}
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 80vh;
  background-color: #fff;
  border-radius: 10px 10px 0 0;
  position: relative;
  .close-box {
    position: absolute;
    right: 10px;
    top: 8px;
    padding: 5px;
  }
  .title-box {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
    font-weight: bold;
    font-size: 28rpx;
  }
  .address-box {
    display: flex;
    align-items: center;
    padding: 0 20px;
    .address-item {
      margin-right: 20px;
      margin-bottom: 10px;
      .choose {
        padding-bottom: 5px;
        font-size: 22rpx;
        position: relative;
        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 2px;
          background-color: red;
        }
      }
      .name {
        font-size: 22rpx;
        padding-bottom: 5px;
      }
    }
  }
  .hot-city-title {
    font-size: 28rpx;
    font-weight: bold;
    margin-bottom: 10px;
  }
  .hot-city-list {
    display: flex;
    flex-wrap: wrap;
    .hot-city-list-item {
      width: 22.7%;
      margin-right: 3%;
      margin-bottom: 10px;
      background-color: #99999933;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 9999px;
      padding: 4px 0;
      font-size: 24rpx;
      &:nth-child(4n) {
        margin-right: 0;
      }
    }
  }
  .address-list-box {
    flex: 1;
    overflow: auto;
    padding: 0 20px;
    .address-list-title {
      font-size: 28rpx;
      font-weight: bold;
      margin-bottom: 10px;
    }
    .address-list-item {
      font-size: 24rpx;
      display: flex;
      align-items: center;
      padding-bottom: 10px;
      .letter-label {
        color: #333;
        width: 20px;
        flex-shrink: 0;
        font-size: 22rpx;
      }
      .name-box {
        color: #000;
      }
    }
    
  }
}
</style>